<template>
  <md-popup id="popup-container" v-model="value" position="bottom" :has-mask="true" prevent-scroll @hide="cancel">
    <div class="container">
      <div class="upper column">
        <div class="left row between">
          <div class="title">请选择用车时间</div>
          <md-icon name="guanbi" class="guanbi" @click="cancel"></md-icon>
        </div>
        <div class="right">
          <div class="subtitle">遇到顺路车主可以立即出发</div>
        </div>
      </div>
      <div class="lower">
        <md-radio ref="radio" icon="circle-right" icon-size="md" :default-index="0" :options="radioOptions" :is-across-border="true" @change="onRadioChange">
          <template slot-scope="{ option }">
            <div class="radioOption">{{ option.text }}</div>
          </template>
        </md-radio>
        <div class="picker-box" v-if="confirmed.type=='2'">
          <md-picker ref="picker" :cols="3" :data="timeData" @change="onPickerChange" @initialed="onPickerInitialed" is-view is-cascade></md-picker>
        </div>
        <div class="row xy-center wait-time-string" v-if="confirmed.type=='2'">
          <md-agree v-model="hasWaitTime">前后{{ cityInfo.orderAutoTime }}分钟</md-agree>
        </div>
      </div>
      <div class="confirm-box">
        <md-button @click="confirm">{{confirmed.type=='1'?'随时可走':confirmString}}</md-button>
      </div>
    </div>
  </md-popup>
</template>

<script>
import '@/assets/svgs/guanbi.svg';
import { Agree, Button, Radio, Icon, Popup, Picker } from 'mand-mobile';
import { mapGetters } from 'vuex';
import Moment from 'moment';
import { extendMoment } from 'moment-range';
const moment = extendMoment(Moment);
moment.locale('zh-cn');

export default {
  name: 'time-selector',
  components: {
    [Button.name]: Button,
    [Radio.name]: Radio,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [Agree.name]: Agree
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    appendTo: {
      default: () => document.body
    },
    pickerData: {
      default: []
    },
    cityInfo: {
      default: {}
    }
  },
  data() {
    return {
      pickerDefaultIndex: [0, 0, 0],
      confirmed: {
        type: '1',
        time: 0,
        text: '',
        hasWaitTime: false
      },
      currentPickerValue: null,
      timeData: [],
      radioOptions: [
        {
          text: '随时可走',
          value: '1'
        },
        {
          text: '预约',
          value: '2'
        }
      ],
      hasWaitTime: false,
      confirmString: ''
    };
  },
  watch: {
    hasWaitTime: 'changeConfirmString'
  },
  methods: {
    confirm() {
      this.value = false;
      if (this.confirmed.type === '2') {
        this.confirmed.text =
          this.currentPickerValue[0].text + this.currentPickerValue[1].text + ':' + this.currentPickerValue[2].text;
      }

      this.$emit('submit', this.confirmed);
    },
    cancel() {
      this.value = false;
      this.$emit('cancel');
    },
    onRadioChange(option, index) {
      this.confirmed.type = option.value;
      this.changeConfirmString();
    },
    onPickerInitialed() {
      this.currentPickerValue = this.$refs.picker.getColumnValues();
      this.changeConfirmString();
    },
    onPickerChange(columnIndex, itemIndex, value) {
      this.currentPickerValue = this.$refs.picker.getColumnValues();
      this.changeConfirmString();
    },
    changeConfirmString() {
      this.confirmed.hasWaitTime = this.hasWaitTime;
      if (this.currentPickerValue) {
        if (this.hasWaitTime) {
          const time = this.currentPickerValue[2].value;
          let min = Moment(time).subtract(this.cityInfo.orderAutoTime, 'm');
          let max = Moment(time).add(this.cityInfo.orderAutoTime, 'm');
          let minString = min.format('HH:mm');
          let maxString = max.format('HH:mm');
          this.confirmString = this.currentPickerValue[0].text + minString + '~' + maxString + '出发';
          this.confirmed.time = this.currentPickerValue[2].value;
        } else {
          this.confirmString = this.cityInfo.orderAutoTime + '分钟后出发';
          this.confirmed.time = this.currentPickerValue[2].value;
        }
      }
    }
  },
  mounted() {
    if (this.appendTo) {
      this.appendTo.appendChild(this.$el);
    }
    this.timeData = [this.pickerData];
  },
  beforeDestroy() {
    if (this.appendTo) {
      this.appendTo.removeChild(this.$el);
    }
  }
};
</script>

<style lang="stylus" scoped>
#popup-container {
  .container {
    background-color: #fff;
    box-sizing: border-box;

    .upper {
      padding: 30px;

      .left {
        width: 100%;

        .title {
          font-size: 36px;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          line-height: 36px;
        }

        .guanbi {
          width: 24px;
          height: 24px;
        }
      }

      .subtitle {
        margin-top: 20px;
        font-size: 24px;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 26px;
      }
    }

    .lower {
      .radioOption {
        font-size: 30px;
        color: #333;
      }
    }

    .wait-time-string {
      font-size: 30px;
      font-weight: 400;
      color: #666666;
      line-height: 30px;
      margin-bottom: 20px;
    }

    .confirm-box {
      box-sizing: border-box;
      padding: 20px;
    }
  }
}
</style>
